/*
 * @version: 
 * @Author: yu
 * @Date: 2023-07-17 17:05:19
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-18 15:37:25
 */
import React, { useRef, useState, useEffect } from 'react';
import { Breadcrumb, Button } from 'antd';
import { menuList } from '../../request/api'
import List from './List'
import Dialog from './dialog';
export default function Menu() {
    let [isShow, setShow] = useState(false)    //弹窗的显示隐藏
    let [isAdd, setAdd] = useState(true)   //true是添加   false是编辑
    //设置一个菜单列表的变量
    let [menulist, setMenu] = useState([])
    let dialog = useRef()    //获取ref节点


    //添加
    const add = () => {
        setShow(true)
        setAdd(true)
    }


    //取消
    const cancel = () => {
        setShow(false)
    }


    //封装一个编辑事件
    const editInfo = (e) => {
        setShow(true)
        setAdd(false)
        // console.log(dialog,11111);
        dialog.current.lookup(e)

    }

    //封装一个获取列表接口的事件
    const getMenu = async () => {
        let res = await menuList();
        setMenu(res.list)
        // console.log(res);
    }

    //组件一加载调用列表接口
    useEffect(() => {
        getMenu()
    }, [])



    return (
        <div className='div1'>
            <Breadcrumb
                items={[
                    {
                        title: <a href="/index/home">首页</a>,
                    },
                    {
                        title: <a href="#">菜单管理</a>,
                    },
                ]}
            />
            <Button onClick={add} className='div2' type="primary">添加</Button>

            {/* 列表 */}
            <List editInfo={editInfo} menulist={menulist} getMenu={getMenu}></List>


            {/* 弹窗 */}
            <Dialog ref={dialog} isShow={isShow} isAdd={isAdd} cancel={cancel} menulist={menulist} getMenu={getMenu}></Dialog>
        </div>
    )
}
